<template>
  <MainLayout>
    <div class="order-detail-content">
      <el-result 
        icon="success" 
        title="订单提交成功！" 
        sub-title="您的订单已提交，我们将尽快为您处理"
      >
        <template #extra>
          <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
          <el-button @click="$router.push('/orders')">查看订单</el-button>
        </template>
      </el-result>
      
      <el-card style="margin-top: 30px" v-if="order">
        <template #header>
          <span>订单信息</span>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ order.orderId }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag type="success">待发货</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="收货人">{{ order.name }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ order.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="2">{{ order.address }}</el-descriptions-item>
          <el-descriptions-item label="订单总额">
            <span style="color: #f56c6c; font-size: 18px; font-weight: bold">
              ¥{{ order.totalPrice.toFixed(2) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="运费">¥{{ order.shippingFee.toFixed(2) }}</el-descriptions-item>
        </el-descriptions>
        
        <el-divider />
        
        <h3>商品清单</h3>
        <el-table :data="order.items" style="width: 100%; margin-top: 20px">
          <el-table-column prop="image" label="商品" width="100">
            <template #default="scope">
              <el-image :src="scope.row.image" style="width: 80px; height: 80px" fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="price" label="单价" width="100">
            <template #default="scope">¥{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column label="数量" width="100">
            <template #default="scope">{{ scope.row.quantity }}</template>
          </el-table-column>
          <el-table-column label="小计" width="100">
            <template #default="scope">
              ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </MainLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import MainLayout from '../layouts/MainLayout.vue'

const route = useRoute()
const order = ref(null)

onMounted(() => {
  const orderId = route.params.id
  
  // 从localStorage获取订单
  const orders = JSON.parse(localStorage.getItem('orders') || '[]')
  order.value = orders.find(o => o.orderId === orderId)
  
  if (!order.value) {
    ElMessage.warning('订单不存在')
  }
})
</script>

<style scoped>
.order-detail-content {
  padding: 20px 0;
}
</style>

